<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.一些常见的错误</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<Person></Person>
			<hr>
			<School></School>
		</div>

		<script type="text/javascript">
			// 定义组件
			const Person = Vue.extend({
				template:`
					<div>
						<h2>人员信息</h2>
						<h3>人员姓名：{{pname}}</h3>
						<h3>人员年龄：{{age}}</h3>
						<button @click="showPersonInfo">点我提示人员信息</button>
					</div>
				`,
				data(){
					return {
						pname:'老刘',
						age:80,
					}
				},
				methods:{
					showPersonInfo(){
						alert(this.pname + '-' + this.age)
					}
				},
				mounted(){
					console.log('Person组件挂载了')
				}
			})

			const School = Vue.extend({
				template:`
					<div>
						<h2>学校信息</h2>
						<h3>学校名称：{{sname}}</h3>
						<h3>学校地址：{{address}}</h3>
						<button @click="showSchoolInfo">点我提示学校信息</button>
					</div>
				`,
				data(){
					return {
						sname:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods:{
					showSchoolInfo(){
						alert(this.sname + '-' + this.address)
					}
				},
				mounted(){
					console.log('School组件挂载了')
				}
			})
			// 创建vm
			new Vue({
				el:'#demo',
				components:{Person,School}, //注册组件
				mounted(){
					console.log('vm挂载了')
				}
			})
		</script>
	</body>
</html>